<!--
 * @Date: 2024-04-28 11:52:05
 * @LastEditors: 王帅 1677191300@qq.com
 * @LastEditTime: 2024-05-16 15:35:47
 * @FilePath: \pcVue3\src\components\casing\TablePaging.vue
 * @Description: 
-->
<template>
  <div>
    <el-table :data="tableData">
      <template v-for="(item) in columns" >
        <el-table-column v-if="item.type == 'btns'" v-bind="item"  :key="item.type">
          <template #default="scope">
            <el-button v-for="button in item.btnList" :key="button.name" :type="button.type || 'primary'" link
              @click="button.on(scope.row)" :disable="button.disable" v-permission="button.permission">
              {{ button.name }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column v-else v-bind="item" :key="item.prop" />
      </template>
    </el-table>
    <div class="flex_center mt_10">
      <el-pagination small background @change="paginationChange"  v-model:page-size="pageSize" :page-sizes="pageSizes"
        layout="sizes, prev, pager, next, jumper, ->, total" :total="total" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { defineProps, ref, withDefaults, defineEmits } from "vue";
const emit = defineEmits<{
  change: [pageIndex: number, pageSize: number] // 具名元组语法
}>()
interface tablePagingProps {
  columns: Array<any>;
  tableData: Array<any>;
  total?: number
}
withDefaults(defineProps<tablePagingProps>(), {
  columns: () => { return [] },
  tableData: () => { return [] },
  total: 100
})
let pageSizes = ref([10, 20, 30, 40, 50, 100])
let pageSize = ref(10)
emit("change", 1, pageSize.value)
const paginationChange = (currentPage: number, pageSize: number) => {
  emit("change", currentPage, pageSize)
}
</script>
<style lang="scss" scoped>

</style>
